<template>
  <div>
    <a-modal
      :visible="visible"
      title="新建剪辑"
      :bodyStyle="{
        padding: '20px 60px',
      }"
      width="800px"
      :footer="null"
      @cancel="cancelClick"
      destroyOnClose
    >
      <a-form>
        <a-form-item v-bind="validateInfos.name" label="剪辑名称">
          <a-input v-model:value="modelRef.name" placeholder="请输入剪辑名称" />
        </a-form-item>
        <a-form-item v-bind="validateInfos.relation" label="关联项目">
          <div class="flex">
            <a-select
              v-model:value="modelRef.relation"
              show-search
              placeholder="Select a person"
              :options="options"
              :filter-option="filterOption"
              @focus="handleFocus"
              @blur="handleBlur"
              @change="handleChange"
            ></a-select>
            <a-button
              @click="bVisible = true"
              style="border-left: 0; border-radius: 0 5px 5px 0"
              type="primary"
              >新建</a-button
            >
          </div>
        </a-form-item>
        <a-form-item v-bind="validateInfos.type" label="成片保存至">
          <a-select
            v-model:value="modelRef.type"
            show-search
            placeholder="Select a person"
            class="select-input"
            :options="options"
            :filter-option="filterOption"
            @focus="handleFocus"
            @blur="handleBlur"
            @change="handleChange"
          ></a-select>
        </a-form-item>
        <a-form-item v-bind="validateInfos.ratio" label="剪辑名称">
          <div class="ratio-list">
            <div
              class="ratio-item"
              :class="modelRef.ratio == item.id ? 'active-ratio' : ''"
              v-for="(item, index) in ratioList"
              :key="index"
              @click="ratioChange(item.id)"
            >
              <div
                :class="
                  item.id == '9:16'
                    ? 'w9-h16'
                    : item.id == '16:9'
                    ? 'w16-h9'
                    : 'w1-h1'
                "
              >
                <div class="ratio-item-name">{{ item.name }}</div>
                <div class="ratio-item-value">{{ item.id }}</div>
              </div>
            </div>
          </div>
        </a-form-item>
      </a-form>
      <div class="footer">
        <a-space :size="20">
          <a-button @click="cancelClick">取消</a-button>
          <a-button type="primary" @click="submitClick">开始剪辑</a-button>
        </a-space>
      </div>
    </a-modal>
    <AddBusiness
      :visible="bVisible"
      @onCancel="closeBUsinessModal"
    ></AddBusiness>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;
import AddBusiness from "./AddBusiness.vue";
export default defineComponent({
  name: "AddClipping",
  components: { AddBusiness },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    imgeUrl: {
      type: String,
      default: "",
    },
  },
  setup(props, { emit }) {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      bVisible: false,
      options: [],
      count: 0,
      ratioList: [
        {
          id: "9:16",
          name: "竖版",
        },
        {
          id: "16:9",
          name: "横版",
        },
        {
          id: "1:1",
          name: "方形",
        },
      ],
    });

    const modelRef = reactive({
      name: "",
      relation: "",
      type: "",
      // 比例
      ratio: "9:16",
    });
    const rulesRef = reactive({
      name: [
        {
          required: true,
          message: "请输入姓名",
        },
      ],
    });

    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );
    const cancelClick = () => {
      resetFields();
      emit("onCancel");
    };

    const submitClick = () => {
      validate().then(() => {
        emit("onSubmit");
        resetFields();
      });
    };
    const ratioChange = (id) => {
      modelRef.ratio = id;
    };
    const closeBUsinessModal = () => {
      state.bVisible = false;
    };
    return {
      ...toRefs(state),
      cancelClick,
      validateInfos,
      resetFields,
      modelRef,
      submitClick,
      ratioChange,
      closeBUsinessModal,
    };
  },
});
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
.ratio-list {
  display: flex;
}
.ratio-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 145px;
  height: 80px;
  background: #fafafa;
  border-radius: 6px;
  border: 1px solid #f2d2c1;
  margin-right: 10px;
  color: #2878FF;
  cursor: pointer;
}
.w9-h16 {
  width: calc(70px / (16 / 9));
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(225deg, #eef7ff 0%, #b2dfe9 100%);
  border: 1px solid #2878FF;
}
.w16-h9 {
  width: calc(50px / (9 / 16));
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(225deg, #eef7ff 0%, #b2dfe9 100%);
  border: 1px solid #2878FF;
}
.w1-h1 {
  width: 50px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(225deg, #eef7ff 0%, #b2dfe9 100%);
  border: 1px solid #2878FF;
}
.active-ratio {
  background: #edf6ff;
  // color: #fef6f2;
  border: 1px solid #2878FF;
}
input {
  border-radius: 5px;
}
:deep(.ss-select-selector) {
  border-radius: 5px 0 0 5px !important;
}
.select-input :deep(.ss-select-selector) {
  border-radius: 5px !important;
}
button {
  border-radius: 5px;
}
</style>
